<template>
  <div class="gratis">
    <div class="bigbox">
      <!-- 头部 -->
      <header>
        <div class="h-left">
          <router-link to="home"
            ><img src="../../assets/image/18721.png" style="width: 8px"
          /></router-link>
        </div>
        <div class="h-title">免费小说</div>
        <div class="h-right">
          <router-link to="/personal" style="margin-right: 10px"
            >书架</router-link
          >
        </div>
      </header>

      <div class="free_pic">
        <div>
          <a href="javasctript:void(0)">
            <img
              src="https://img.xmkanshu.com/operateimg/novel/4f/4fde31fd64cf3a8f1e332ea7d39d89cc.jpg"
            />
          </a>
        </div>
      </div>

      <!-- 本周一折 -->
      <div class="box" style="margin-top: 10px">
        <div class="all-title">本周一折</div>
        <div
          class="book-pic-list"
          v-for="(item, index) in datacontent"
          :key="index"
        >
          <router-link :to="'/noveldetail?id=' + item.id">

          <div class="al">
            <div class="list_img">
              <img :src="item.fictionImg" />
            </div>
            <div class="conter">
              <div class="name">{{ item.titleName }}</div>
              <div class="new-Author">{{item.Author}}</div>
              <div class="infor-name">
                {{item.introduce}}
              </div>
            </div>
          </div>
          </router-link>

          <div class="free_cx">
            {{item.coins}}书币<br />
            <span>{{item.bookCoins}}书币</span>
          </div>
        </div>
        <div class="line">
          <hr size="1" color="#efefef" />
        </div>
      </div>
      <!-- 完本促销 -->
      <div class="box" style="margin-top: 10px">
        <div class="all-title">完本促销</div>
        <div class="book-pic-list">
          <div
            class="al"
            onclick="location.href='/book?fr=smsstg&amp;urbid=%2Fspecial%2Flimitfree_89_0&amp;bkid=12033418204&amp;pos=0&amp;bck=89'"
          >
            <div class="list_img">
              <img
                src="https://img.xmkanshu.com/novel/group2/M00/BF/73/CwsAhl0AWPaAG3w_AAAYnlH9bZ8524.jpg"
              />
            </div>
            <div class="conter">
              <div class="name">农女芊芊</div>
              <div class="new-Author">洛珺颜</div>
              <div class="infor-name">
                【荣获第三届“咪咕杯”网络文学大赛优秀奖】重获新生，面对各种极品亲...
              </div>
            </div>
          </div>

          <div class="free_cx">
            400书币<br />
            <span>800书币</span>
          </div>
        </div>
        <div class="line">
          <hr size="1" color="#efefef" />
        </div>
        <div class="book-pic-list">
          <a href="../子页面/小说详情页.html">
            <div class="al">
              <div class="list_img">
                <img
                  src="https://img.xmkanshu.com/novel/group2/M00/7B/CC/CwsAiFrMyPiAC6rZAAAdy3Mwx18549.jpg"
                />
              </div>
              <div class="conter">
                <div class="name">辣手狂兵</div>
                <div class="new-Author">崔家二少</div>
                <div class="infor-name">
                  恶魔岛的混二代高猛空降华阳城，保护从未谋面的极品奇葩妹妹，偶遇麻辣...
                </div>
              </div>
            </div>
          </a>

          <div class="free_cx">
            80书币<br />
            <span>800书币</span>
          </div>
        </div>
        <div class="line">
          <hr size="1" color="#efefef" />
        </div>
        <div class="book-pic-list">
          <div
            class="al"
            onclick="location.href='/book?fr=smsstg&amp;urbid=%2Fspecial%2Flimitfree_89_0&amp;bkid=12033418204&amp;pos=0&amp;bck=89'"
          >
            <div class="list_img">
              <img
                src="https://img.xmkanshu.com/novel/group2/M00/BF/73/CwsAhl0AWPaAG3w_AAAYnlH9bZ8524.jpg"
              />
            </div>
            <div class="conter">
              <div class="name">农女芊芊</div>
              <div class="new-Author">洛珺颜</div>
              <div class="infor-name">
                【荣获第三届“咪咕杯”网络文学大赛优秀奖】重获新生，面对各种极品亲...
              </div>
            </div>
          </div>

          <div class="free_cx">
            400书币<br />
            <span>800书币</span>
          </div>
        </div>
        <div class="line">
          <hr size="1" color="#efefef" />
        </div>
      </div>
      <!-- 页脚搜索框 -->
      <router-link to="/search">
        <div class="m-search">
          <!-- 输入框 -->
          <div class="inp">
            <input type="text" placeholder="作者名/书名" />
          </div>
          <!-- 放大镜 -->
          <div class="magnifier"></div>
        </div>
      </router-link>
      <!-- 页脚 -->
      <footermodule></footermodule>
    </div>
  </div>
</template>

<script>
import { getFictionApi } from "../../api/novelmain.js";
import footermodule from "../../components/FooterModule.vue";
export default {
  data() {
    return {
      fiction: null,
       datacontent: [],
    };
  },
  methods: {
    // getFictionApiFun() {
    //   getFictionApi({ id: this.$route.query.id }).then((data) => {
    //     console.log(data.fiction);
    //     this.fiction = data.fiction
    //     // let index = data.fiction.findIndex(
    //     //   (item) => item.id == this.$route.query.id
    //     // );
    //     // this.fiction = data.fiction[index];
        
    //   });
    // },
  },
  created() {
    // this.getFictionApiFun();
  },
  mounted(){
     getFictionApi().then((data) => {
      this.fiction = data.fiction;

      // 页面一加载的时候先出来三个对象的内容
      for (var i = 1; i < this.fiction.length; i++) {
        if (i < 6) {
          this.datacontent.push(this.fiction[i]);
        }
      }
    });
  },
  components: {
    footermodule,
  },
};
</script>

<style lang="scss" scoped>
.free_pic {
  div {
    img {
      width: 100%;
      display: block;
    }
  }
}
.book-pic-list {
  background: #fff;
  position: relative;
  .al {
    padding: 15px 10px;
    display: flex;
  }
  .list_img {
    width: 60px;
    height: 80px;
    img {
      width: 60px;
      height: 80px;
      box-shadow: 1px 1px 5px #dedede;
    }
  }
  .conter {
    margin-left: 10px;
    .name {
      font-size: 15px;
      color: #333;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      padding-right: 80px;
    }
    .new-Author {
      font-size: 12px;
      color: #999;
      margin-top: 8px;
      
    }
    .infor-name {
      font-size: 12px;
      color: #999;
      margin-top: 5px;
      overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient: vertical;
    }
  }
}
.free_cx {
  position: absolute;
  right: 0;
  top: 12px;
  width: auto;
  min-width: 75px;
  text-align: center;
  font-size: 14px;
  color: #f2503c;
  line-height: 21px;
  span {
    font-size: 12px;
    color: #999;
    text-decoration: line-through;
  }
}
</style>